<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="./../css/common.css" />
	<body oncontextmenu="return false;" onselectstart="return false"></body>
	<style>

		.box {
			position: relative;
		}

		.box>div {
			display: inline-block;
			vertical-align: top;
			position: absolute;
		}

		.menu {
			border-right: 1px solid #E0E4FE;
			width: 100px;
			height: 100%;
			padding: 5px;
			overflow-y: auto;
			background: #FFFFFF;
		}
		.menu li li {
			list-style: none;
			margin-left: 10px;
		}

		.container {
			width: 474px;
			height: 100%;
			overflow-y: hidden;
			margin-left: 120px;
		}

		.layout-box {
			height: calc(100% - 70px);
			margin: 10px 0px;
			overflow-y: auto;
		}

		
		.layout-box>ul {
			margin-bottom: 10px;
		}

		.layout-box>ul>li {
			vertical-align: top;
			display: inline-block;
			margin-left: 20px;
			min-height: 25px;
		}

		.layout-box>ul>li:first-child {
			width: 80px;
		}

		.btn-box {
			height: 30px;
			text-align: right;
			padding-right: 30px;
		}

		h2 {
			margin-bottom: 10px;
		}

		h3 {
			margin-top:-5px;
		}
		.hotkey {
			border: 1px solid #CCCCCC; 
		}
		.hotkey ul {
			border-top:1px solid #CCCCCC;
		}
		.hotkey li {
			padding: 3px;
			display: inline-block;
		}
		.hotkey ul:first-child {
			border-top:0px;
		}
		.hotkey li:first-child {
			border-right: 1px solid #CCCCCC;
			width: 100px;
			background: #c2dff3;
		}
		.hotkey li:last-child {
			width: 200px;
			background: #FFFFFF;
		}

		.follows li {
			display: inline-block;
			background-repeat: no-repeat;
			background-size: auto 40px;
			background-image: url(./../imgs/follows.png);
			background-position-y: 0px;
			margin-right: 5px;
			width: 40px;
			height: 40px;
			border:2px solid #ddfcfc;
			cursor: pointer;
		}

		.follows li:hover {
			border: 2px solid #FFFFFF;
		}

		pre {
			width: 330px;
		}
	</style>
</head>
<body>
	 <div class="box">
		<div class="menu" id="menu">
			<ul>
				<li>常规</li>
				<li>
					<ul>
						<li>语言</li>
						<li>界面</li>
					</ul>
				</li>
			</ul>
			<ul>
				<li>播放</li>
				<li>
					<ul>
						<li>快捷键</li>
					</ul>
				</li>
			</ul>
			<ul>
				<li>关于</li>
				<li>
					<ul>
						<li>作者</li>
						<li>版权</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="container" id="container">
			<p>所有设置在重启后才会生效</p>
			<div class="layout-box">
				<h2>常规</h2>
				<ul>
					<li><h3>语言</h3></li>
					<li><select id="langs-select"></select></li>
				</ul>
				<ul>
					<li><h3>界面</h3></li>
					<li>
						<div>
							<input type="checkbox" value="" id="show-tray" />
							<label for="show-tray" id="show-tray-label">显示托盘</label>
						</div>
						<div>
							<input type="checkbox" value="" id="min-to-tray" />
							<label for="min-to-tray" id="min-to-tray-label">最小化到托盘</label>
						</div>
						<div>
							<input type="checkbox" value="" id="close-to-tray" />
							<label for="close-to-tray" id="close-to-tray-label">关闭按钮到托盘</label>
						</div>
					</li>
				</ul>
				<h2>播放</h2>
				<ul>
					<li><h3>快捷键</h3></li>
					<li class="hotkey">
						<ul>
							<li>播放/暂停</li>
							<li id="play-pause-val"></li>
						</ul>
						<ul>
							<li>快进</li>
							<li id="forward-5s-val"></li>
						</ul>
						<ul>
							<li>快退</li>
							<li id="back-5s-val"></li>
						</ul>
						<ul>
							<li>增大音量</li>
							<li id="volume-up-val"></li>
						</ul>
						<ul>
							<li>减小音量</li>
							<li id="volume-down-val"></li>
						</ul>
					</li>
				</ul>
				<h2>关于</h2>
				<ul>
					<li><h3>作者</h3></li>
					<li>
						<h3>未古其人</h3>
						<ul class="follows" id="follows"></ul>
					</li>
				</ul>
				<ul>
					<li><h3>版权</h3></li>
					<li><pre>本软件遵循 Apache-2.0 协议进行开源处理。
在 Apache-2.0 协议下，可以无偿使用本软件。
保留 Apache-2.0 协议下的所有权利。
关于 Apache-2.0：的详细说明：
<a href="https://www.oschina.net/question/12_2828">详细介绍 Apache Licence 2.0 协议</a></pre>
					</li>
				</ul>
			</div>
			<div class="btn-box">
				<button id="ok-btn">确定</button>
				<button id="apply-btn">应用</button>
				<button id="cancel-btn">取消</button>
				<button id="default-btn">恢复默认</button>
			</div>
		</div>
	 </div>
</body>
<script type="text/javascript">
	const logic = require('./../../src/logic/perferences');
	logic.init();
</script>
</html>